<template>
	<vxe-modal
		v-model="dialog"
		title="配置数据源"
		id="dataSource"
		className="dataSource"
		width="1000"
		@close="cancel"
		show-zoom>
		<template #default>
			<vxe-button @click="insertEvent(null)">新增数据源</vxe-button>
			<vxe-button @click="$refs.xTable.removeCheckboxRow()">删除选中数据源</vxe-button>
			
			<vxe-table
				border
				resizable
				show-overflow
				ref="xTable"
				:data="json.dataSource"
				:loading="loading"
				:edit-rules="formRules"
				:edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
					<vxe-column type="checkbox" width="60"></vxe-column>
					<vxe-column field="name" title="数据源标识" sortable width="200" :edit-render="{name: 'input'}"></vxe-column>
					<vxe-column field="methods" title="请求方式" sortable width="140" :edit-render="{}">
						<template #default="{ row }">
							<span>{{ row.methods }}</span>
						</template>
						<template #edit="{ row }">
							<vxe-select v-model="row.methods" transfer>
								<vxe-option v-for="item in json.pageDict.requestMethods" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></vxe-option>
							</vxe-select>
						</template>
					</vxe-column>
					<vxe-column field="apiUrl" title="数据源api" sortable :edit-render="{name: 'input'}"></vxe-column>
			</vxe-table>
			
			<div class="dialogFooter">
				<vxe-button status="primary" @click="enter">确定</vxe-button>
			</div>
		</template>
	</vxe-modal>
</template>

<script>

export default {
  name: 'dataSource',
  components: {
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	info: {
		type: Object,
		default: () => {}
	}
  },
  data() {
	return {
		json: this.info,
		formData: {},
		formRules: {
			name: [
				{ required: true, message: '请输入数据源名称' }
			],
			methods: [
				{ required: true, message: '请选择请求方式' }
			],
			apiUrl: [
				{ required: true, message: '请输入数据源api' }
			]
		},
		loading: false,
	}
  },
  created() {
  },
  methods: {
	// 新增数据源
	insertEvent(row) {
		let xTable = this.$refs.xTable
		const record = {
			checked: false,
			name: '',
			methods: '',
			apiUrl: ''
		}
		xTable.insertAt(record, row).then(({ row }) => {
			xTable.setActiveRow(row)
		})
	},
	// 弹窗确定
	async enter() {
		const $table = this.$refs.xTable
		const errMap = await $table.validate().catch(errMap => errMap)
		if (errMap) {
			this.$modal.message({ status: 'error', message: '请输入必填项！' })
		} else {
			const $table = this.$refs.xTable
			const insertRecords = $table.getInsertRecords();
			this.json.dataSource = [...this.json.dataSource, ...insertRecords];
			this.cancel();
		}
	},
	// 弹窗关闭/取消
	cancel() {
		this.$emit('close', this.json)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.dialogFooter {
		text-align: right;
		padding: 20px 0 10px
	}
</style>
